<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>注册</title>
<!--    <script src="https://unpkg.com/axios@0.21.0/dist/axios.min.js"></script>-->
<!--    <script src="https://unpkg.com/vue@2.0.1/dist/vue.js"></script>-->
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/signup.css">
</head>

<body>
    <div id="vm">
        <div id="global"></div>

        <div class="title">
            注册页面
        </div>

        <div class="register">
            <form action="#" @submit.prevent="register">
                <div class="item1">
                    <label> 账号 : <input v-model="username" type="text" required autofocus /> </label>
                </div>
                <div class="item1">
                    <label> 密码 : <input v-model="password" type="password" required autofocus /> </label>
                </div>
                <div class="item1">
                    <label> 姓名 : <input v-model="name" type="text" required autofocus /> </label>
                </div>
                <div class="item2">
                    <p>性别 :</p>
                    <label><input v-model="gender" name="gender" type="radio" value="M" />男</label>
                    <label><input v-model="gender" name="gender" type="radio" value="F" />女</label>
                </div>
                <div class="btn">
                    <input type="submit" value="注 册" />
                </div>
            </form>
        </div>
        <div :class="should_show?'show':'hide'">此账号已被注册</div>
    </div>
</body>
<script>
    let vm = new Vue({
        el: '#vm',
        data: {
            username: '',
            password: '',
            name: '',
            gender: 'M',
            should_show: false
        },
        methods: {
            register: () => {
                // 显示JSON格式的Model:
                // alert(JSON.stringify(this.$data));
                // TODO: AJAX POST...
                axios({
                    method: 'post',
                    url: '/signup',
                    data: {
                        username: vm.username,
                        password: vm.password,
                        name: vm.name,
                        gender: vm.gender
                    }
                })
                    .then((response) => {
                        console.log(response.data);
                        if (response.data.code === 200) {
                            axios({
                                method: 'post',
                                url: '/login',
                                params: {
                                    username: vm.username,
                                    password: vm.password
                                }
                            })
                                .then((response) => {
                                    console.log(response);
                                    window.location.replace('/user/home')
                                })
                                .catch((err) => {
                                    console.log(err)
                                })
                        }
                        else {
                            vm.should_show = true
                        }
                    })
                    .catch((err) => {
                        console.log(err)
                    })
            }
        }
    });
</script>

</html>
